<template>
  <!-- // 地图 -->
  <div class="homePageCards1">
    <div id="warrmap" style="width: 100%; height: 100%"></div>
    <div id='layercards'></div>
  </div>
</template>
<script>
import sjccKey from "@/config/sjmapkey";
export default {
  name: "ResourceMap",
  components: {},
  props: {
    mapCenter: {
      type: Array,
      default: () => [112.96730140947924, 30.574022147218216]
    },
    mapZoom: {
      type: Number,
      default: 8
    }
  },
  data: function () {
    return {
      map: null, // 基础地图
      imgUrl1: require("@/assets/img/full.png"),
      imgUrl2: require("@/assets/img/nofull.png"),
      FullScreen: false,
      isFullscreen: false
    };
  },
  beforeDestroy() {
    this.map && this.map.remove();
    this.map = null;
    this.$eventBus.$off("createlayer");
  },
  mounted() {
    this.initLocalMap();
    window.addEventListener("resize", this.onresize);
  },
  methods: {
    fullscreen() {
      // 进入全屏
      var docElm = document.querySelector(".homePageCards1"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.FullScreen = !this.FullScreen;
    },
    initLocalMap() {
      const that = this;
      SGMap.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then((res) => {
        this.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
          container: "warrmap",
          // 地图样式
          style: "aegis://styles/aegis/Streets",
          // 默认缩放层级
          zoom: 9,
          // 地图中心点
          center: [114.36730140947924, 30.574022147218216],
          // 地图默认字体
          localIdeographFontFamily: "Microsoft YoHei"
        });
        this.map.on("load", function (e) {
          that.drawSymbolLayer([114.09931102667338, 30.534045138942474], 1);
          that.drawSymbolLayer([114.22464708894779, 30.774422180075632], 2);
          that.drawSymbolLayer([114.42713733587999, 30.606895317751395], 3);
          that.drawSymbolLayer([114.92866679503504, 30.632340383893606], 4);
          that.map.addLayer({
            id: "power-line",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "LineString",
                      // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                      coordinates: [
                        [114.09931102667338, 30.534045138942474],
                        [114.22464708894779, 30.774422180075632],
                        [114.42713733587999, 30.606895317751395],
                        [114.92866679503504, 30.632340383893606]
                      ]
                    }
                  }
                ]
              }
            },
            layout: {
              "line-cap": "round",
              "line-join": "round"
            },
            paint: {
              "line-color": "#ed6498",
              "line-width": 6
            }
          });
        });
      });
    },
    drawSymbolLayer(coordinates, i) {
      const that = this;
      this.map.loadImage(
        "https://map.sgcc.com.cn/products/js-sdk/v3/assets/images/markers_new2_4ab0bc5_78.png",
        function (error, image) {
          that.map.addImage("poi", image);
        }
      );

      this.map.addLayer({
        id: "choicePoi" + i,
        type: "symbol",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates
                },
                properties: {
                  name: ""
                }
              }
            ]
          }
        },
        layout: {
          "icon-image": "poi",
          "icon-size": 1,
          "icon-ignore-placement": true,
          "text-ignore-placement": false,
          "text-field": "{name}",
          "text-size": 12,
          "text-anchor": "top",
          "text-allow-overlap": false,
          "icon-anchor": "bottom",
          "text-offset": [0, 0],
          "text-max-width": 8,
          "text-font": ["Microsoft YaHei Regular"]
        },
        paint: {
          "text-color": "#ff0000",
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1.33333
        }
      });
    },
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      const winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      const isFull = window.fullScreen || document.webkitIsFullScreen;
      if (isFull === undefined) {
        this.isFullscreen = winFlag;
      } else {
        this.isFullscreen = winFlag || isFull;
      }
      this.FullScreen = this.isFullscreen;
    }
  }
};
</script>

<style scoped lang="less">
.homePageCards1 {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;
  #map {
    border-radius: 5px;
  }
}
.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
:deep(.sgmap-popup-content) {
  background-color: #46577c !important;
  padding: 0 !important;
}
</style>
